<template>
  <section class="welfare-coupon-manage">
    <div class="manage-title">新建/编辑兑换券信息</div>

    <section class="manage-main">
      <el-form
        ref="form"
        v-loading="formloading"
        :model="form"
        :rules="rules"
        label-width="150px"
        class="main-form"
      >
        <el-form-item label="兑换券名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入兑换券名称" />
        </el-form-item>
        <el-form-item label="兑换券数量" prop="total" class="coupon-num">
          <el-input-number
            v-model="form.total"
            style="width: 100%;"
            :min="1"
            :max="999999999"
            :step="1"
            step-strictly
            :controls="false"
            label="请输入兑换券数量"
          />
        </el-form-item>
        <el-form-item label="商品" prop="goodsId">
          <div v-if="!form.goodsId" class="selectbtn" @click="showGoods = true">选择商品</div>
          <template v-else>
            <div class="select-data">
              {{ form.goodsName }}
              <i class="el-icon-close" @click="clearGoods" />
            </div>
          </template>
        </el-form-item>
        <el-form-item label="使用时间" prop="time">
          <el-date-picker
            v-model="form.time"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            :style="{width:'100%'}"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
      </el-form>
    </section>

    <div class="manage-footer">
      <el-button v-if="pageType==='ptdhq'" style="padding: 8px 30px;" @click="handleCancel">返 回</el-button>
      <el-button v-else style="padding: 8px 30px;" @click="handleCancel">取消</el-button>
      <el-button v-if="pageType==='ptdhq'" style="padding: 8px 30px;" type="primary" @click="handleSubCheck">提交审核</el-button>
      <el-button v-else style="padding: 8px 30px;" type="primary" @click="handleSubmit">确定</el-button>
    </div>
    <choose-comm v-if="showGoods" :activityd="id" @cancel="showGoods = false" @comit="selectGoods" />
  </section>
</template>
<script>
import {
  insert,
  update,
  get, check,
  insertAndCheck
} from './../api'
import ChooseComm from '../components/commodity/index'
export default {
  name: 'CouponManage',
  components: {
    ChooseComm
  },
  data() {
    return {
      state: 'create',
      formloading: false,
      form: {
        id: '',
        name: '',
        goodsId: '',
        time: '',
        total: '',
        goodsName: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入兑换券名称',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 50,
          message: '长度在 1 到 50 个字符',
          trigger: 'blur'
        }
        ],
        goodsId: [{
          required: true,
          message: '请选择商品',
          trigger: 'change'
        }],
        total: [{
          required: true,
          message: '请输入兑换券数量',
          trigger: 'blur'
        }],
        time: [{
          required: true,
          message: '请选择使用时间',
          trigger: 'blur'
        }]
      },
      showGoods: false,
      pageType: 'yhq'
    }
  },
  created() {
    this.state = this.$route.query.t === 'c' ? 'create' : 'update'
    if (this.$route.query.pt) {
      this.pageType = this.$route.query.pt
    }
    if (this.$route.query.t === 'u') {
      if (this.$route.query.i) {
        this.getData(this.$route.query.i)
      } else {
        this.$message({
          showClose: true,
          message: '参数异常！',
          type: 'warning',
          onClose: () => {
            this.$router.back()
          }
        })
      }
    }
  },
  methods: {
    /**
			 * 删除所选商品
			 */
    clearGoods() {
      this.form.goodsId = ''
      this.form.goodsName = ''
    },
    /**
			 * 选择的商品
			 */
    selectGoods(obj) {
      this.form.goodsId = obj.goodsId
      this.form.goodsName = obj.goodsName
      this.showGoods = false
    },
    handleSubmit() {
      this.state === 'create' ? this.createData() : this.updateData()
    },

    handleCancel() {
			  if (this.pageType === 'ptdhq') {
        this.$router.back()
      } else {
        this.$router.push({
          path: this.$filterPath('index'),
          query: { ac: this.$route.query.ac }
        })
      }
    },
    handleSubCheck() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const params = Object.assign({}, this.form)
          params['startUseTime'] = params.time && params.time.length > 0 ? params.time[0] : ''
          params['endUseTime'] = params.time && params.time.length > 0 ? params.time[1] : ''
          delete params['time']
          return new Promise((resolve, reject) => {
            insertAndCheck(params).then(() => {
              loading.close()
              this.$alert('提交审核成功，审核通过后方可使用。', '提示', {
                confirmButtonText: '确定',
                showClose: false,
                callback: action => {
                  this.handleCancel()
                }
              })
            }).catch(error => {
              reject(error)
              loading.close()
            })
          })
        }
      })
    },

    /*
			 * 新增
			 * */
    createData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const params = Object.assign({}, this.form)
          params['startUseTime'] = params.time && params.time.length > 0 ? params.time[0] : ''
          params['endUseTime'] = params.time && params.time.length > 0 ? params.time[1] : ''
          delete params['time']
          return new Promise((resolve, reject) => {
            insert(params).then(() => {
              loading.close()
              this.$message({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 1500
              })
              this.handleCancel()
            }).catch(error => {
              reject(error)
              loading.close()
            })
          })
        }
      })
    },
    /**
     * 提交审核
     * */
    handleCheck(row) {
      this.$confirm('是否确认提交审核？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        return new Promise((resolve, reject) => {
          check({ id: row.id }).then(() => {
            loading.close()
            this.$message({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          }).catch(error => {
            loading.close()
            reject(error)
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    /**
			 * 编辑提交
			 */
    updateData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const params = {
            ...this.form
          }
          params['startUseTime'] = params.time && params.time.length > 0 ? params.time[0] : ''
          params['endUseTime'] = params.time && params.time.length > 0 ? params.time[1] : ''
          delete params['time']
          return new Promise((resolve, reject) => {
            update(params).then(() => {
              loading.close()
              this.dialogFormVisible = false
              this.$message({
                title: '成功',
                message: '编辑成功',
                type: 'success',
                duration: 2000
              })
              this.handleCancel()
            }).catch(error => {
              reject(error)
              loading.close()
            })
          })
        }
      })
    },

    /**
			 * 获取详情
			 */
    getData(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get(id).then(res => {
          loading.close()
          const data = res.data.data
          for (const key in this.form) {
            if (key === 'time') {
              if (data['startUseTime'] && data['endUseTime']) {
                this.form[key] = [data['startUseTime'], data['endUseTime']]
              }
            } else {
              this.form[key] = data[key]
            }
          }
          console.log(this.form)
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss">
	@import '@/styles/mixin.scss';

	.welfare-coupon-manage {
		background-color: #fff;
		min-height: calc(100vh - 60px);
		max-height: calc(100vh - 60px);
		overflow: hidden;

		.manage-title {
			position: relative;
			height: 40px;
			line-height: 40px;
			padding: 0 20px;
			background-color: #ffffff;
			border-bottom: 1px solid #e5e5e5;
			font-family: PingFangSC-Medium;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			font-size: 14px;

			&:before {
				content: '';
				position: absolute;
				width: 2px;
				@include bg-color($mainColor);
				top: 13px;
				bottom: 13px;
				left: 15px;
			}
		}

		.manage-main {
			position: absolute;
			top: 50px;
			left: 0;
			right: 0;
			bottom: 52px;
			box-sizing: border-box;
			padding: 0 10px;
			overflow: hidden;

			&::-webkit-scrollbar {
				width: 8px;
				/*对垂直流动条有效*/
				height: 1px;
				/*对水平流动条有效*/
			}

			/** 滚动条轨道*/
			&::-webkit-scrollbar-track {
				box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
				background-color: white;
				border-radius: 3px;
			}

			/** 滚动条里面小方块*/
			&::-webkit-scrollbar-thumb {
				height: 32px;
				border-radius: 5px;
				box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
				background-color: #eaeaea;
			}

			&:hover {
				overflow: auto;
			}
		}

		.main-form {
			width: 1000px !important;
			margin: 0 auto;

			.line {
				text-align: center;
			}

			.form-card {
				margin-top: 20px;

				.el-card__body {
					max-width: 90%;
					margin: 0 auto;
				}
			}

			.coupon-num input {
				text-align: left;
			}

			.select-data {
				display: inline-block;
				background: rgba(246, 246, 246, 1);
				border-radius: 4px;
				font-size: 14px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				padding: 0 10px;
				margin-right: 5px;
				margin-bottom: 8px;

				i {
					cursor: pointer;
					padding-left: 5px;
				}
			}

			.selectbtn {
				display: inline-block;
				width: 120px;
				background: rgba(255, 255, 255, 1);
				@include border-color(1px, dotted, $mainColor);
				border-radius: 4px;
				font-size: 14px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				@include font-color($mainColor);
				text-align: center;
				cursor: pointer;
				margin-bottom: 10px;
			}
		}

		.manage-footer {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			padding: 10px 0;
			background-color: white;
			box-shadow: 0 -3px 6px #f5f5f5;
		}
	}
</style>
